<div>
  <h1 mat-dialog-title style="display:inline-block" mat-dialog-draggable>{{'dlg.docproperty-title' | translate}}</h1>
  <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
  <div mat-dialog-content>
    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;">
      <span>{{'dlg.docproperty-width' | translate}}</span>
      <input numberOnly [(ngModel)]="data.width" style="width: 100px" type="text">
    </div>
    <div class="my-form-field" style="margin-bottom: 10px; float:right">
        <span>{{'dlg.docproperty-height' | translate}}</span>
        <input numberOnly [(ngModel)]="data.height" style="width: 100px" type="text">
    </div>    
    <div style="display: block; margin-top: 10px;margin-bottom:10px">
      <span style="font-size:12px;color:darkgray">{{'dlg.docproperty-background' | translate}}</span>
      <input style="width:100%;height:24px;border:1px solid rgba(0,0,0,0.2);margin-top: 4px;" readonly [(colorPicker)]="data.bkcolor"
        class="color-stroke" title="Change stroke color" [style.background]="data.bkcolor" [cpPresetColors]="defaultColor"
        [cpAlphaChannel]="'disabled'" [cpPosition]="'top'" [value]="data.bkcolor" [cpCancelButton]="true"
        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButton]="true"
        [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" />
    </div>
  </div>
  <div mat-dialog-actions style="float:right; margin-bottom:0px;padding-bottom:0px">
    <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
    <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
  </div>
</div>